<template>
    <div class="employ-container">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">基础信息管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>员工信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <h1></h1>
      <el-row>
        <el-form >
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工姓名" label-width="80px">
                <el-input ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item >
                <el-button type="success">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-button-group>
        <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
        <el-button type="primary" icon="el-icon-share">修改</el-button>
        <el-button type="primary" icon="el-icon-delete">删除</el-button>
      </el-button-group>


      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          small
          layout="prev,pager,next":total="50">

        </el-pagination>
      </el-row>
          </div>


</template>

<script>
    export default {
        name: "Employee",
      data() {
        return {
          tableDate:[],
          dialogVisible:false,
          employee:{
            data:'',
            name:'',
            phone:'',
            address:''
          }
          }

      },
      mounted(){
          var_this=this;
          this.axios({
            url:'http://localhost:3000/employee/list',
            method:'get'
          }).then(function(res){
            _this.tableData=res.data.list;
          })
      },methods:{
        btnAddClick(){
            this.dialogVisible=true;
          },handleClose(){
            this.dialogVisible=false;
        }
      },


      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            phone:'17413611106',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            phone:'17413611103',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            phone:'17413611105',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            phone:'17413611104',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
</script>

<style scoped>

</style>
